<template>
 <div class="draw">
   <ColorView class="float-view" :style="{ backgroundColor: `${color}`}" @click="copyHex(color)"/>
   <Content class="float-content" :data="viewData"/>
</div>
</template>

<script lang="ts">
import ColorView from './ColorView/index.vue';
import Content from './Content/index.vue';
import {isNull,isNullObject,cpValue} from "@/utils/tool";
// @ts-ignore
import store from '@/store/index.js';
import {computed, ref, watch} from 'vue';
import {postColorHex,postColorName,postColorKey} from "@/api/colors";
// @ts-ignore
import {rgbToHex} from "@/utils/convert.js";
import {message} from "ant-design-vue";

export default {
  components: { ColorView,Content },
  setup() {
    const color = ref('')
    const viewData = ref({})
    // const baseData = {
    //   country: null,
    //   describe: null,
    //   hex: null,
    //   name: null,
    //   names: [],
    //   pinyin: null,
    //   poetry: [],
    //   solarTerms: null,
    // }
    const valueState = computed(() => store.state.valueState)
    // hex
    async function fetchPostColorHex(params:any) {
      const res = await postColorHex(params)
      if(res.status === 200 && isNullObject(res.data.colors)) {
        viewData.value = res.data.colors
      } else if(res.status === 200 && Object.keys(res.data.colors).length === 0 ){
        message.warning('暂时还没有收录该内容')
      }
    }
    // name
    async function fetchPostColorName(params:any) {
      const res = await postColorName(params)
      if(res.status === 200 && isNullObject(res.data.colors)) {
        color.value = res.data.colors.hex
        viewData.value = res.data.colors
      } else if(res.status === 200 && Object.keys(res.data.colors).length === 0 ){
        message.warning('暂时还没有收录该内容')
      }
    }
    // key
    async function fetchPostColorKey(params:any) {
      const res = await postColorKey(params)
      if(res.status === 200 && isNullObject(res.data.colors)) {
        color.value = res.data.colors.hex
        viewData.value = res.data.colors
      } else if(res.status === 200 && Object.keys(res.data.colors).length === 0 ){
        message.warning('暂时还没有收录该内容')
      }
    }
    
    watch(valueState,(state)=> {
      const value = JSON.parse(JSON.stringify(state))
      // 监听匹配的更新，更新则调用接口
      // hex
      if(value.hex !== null && value.hex.length > 1) {
        color.value = value.hex
        fetchPostColorHex({ hex: value.hex })
      }
      // rgb -> hex 通过rgb查找
      if(value.rgb.length > 1) {
        const rgbState = `rgb(${value.rgb[0]},${value.rgb[1]},${value.rgb[2]})`
        const hex = '#' + rgbToHex(value.rgb[0],value.rgb[1],value.rgb[2])
        color.value = rgbState
        fetchPostColorHex({ hex: hex})
      }
      // 关键字
      if(isNull(value.key)) {
        fetchPostColorKey({ key: value.key })
      }
  
      // 名字
      if(isNull(value.name)) {
        fetchPostColorName({ name: value.name})
      }
    },{
      immediate: false,
      deep:true
    })
    
    function copyHex(value:any) {
      if(value === '') {
        cpValue('#ffffff')
      } else {
        cpValue(value)
      }
    }
    
    return {
      color,viewData,copyHex
    }
  },
}

</script>

<style scoped lang="scss">
.draw {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 50%;
  margin-left: 20px;
  border-radius: 9px;
  border: 1px solid #cccccc;
}

/* 超小设备 (手机, 600px 以下屏幕设备) */
@media only screen and (max-width: 600px) {
  .draw {
    height: auto;
  }
}

/* 小设备 (平板电脑和大型手机，600 像素及以上) */
@media only screen and (min-width: 600px) {
  .draw {
    height: 496px;
  }
}

/* 中型设备（平板电脑，768 像素及以上） */
@media only screen and (min-width: 768px) {
  .draw {
    height: 496px;
  }
}

/* 大型设备（笔记本电脑/台式机，992 像素及以上） */
@media only screen and (min-width: 992px) {
  .draw {
    height: 496px;
  }
}

/* 超大型设备（大型笔记本电脑和台式机，1300 像素及以上） */
@media only screen and (min-width: 1300px) {
  .draw {
    height: 300px;
  }
}


.float-view {
  margin-top: 20px;
  margin-left: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px 0 #cccccc;
}

.float-content {
  margin-top: 20px;
  margin-bottom: 30px;
}

</style>
